<template>
  <div>
    <template class="swiper-area">
      <Carousel />
    </template>
    <!-- 版心1090px -->
    <!-- 新品首发 -->
    <NewStore :newItemList="newItemList" @toDetail="toDetail" />
    <!-- 人气推荐 -->
    <div class="hot-wrap">
      <!-- 版心1090 -->
      <div class="hot-container">
        <div class="header">
          <div class="header-left">
            <h3>
              <a href="#">人气推荐</a>
            </h3>
            <span
              class="hot-menu"
              :class="hotIndex === 0 ? 'active' : ''"
              @click="handleHot(0)"
            >
              编辑推荐
            </span>
            <span
              class="hot-menu"
              :class="hotIndex === 1 ? 'active' : ''"
              @click="handleHot(1)"
            >
              热销总榜
            </span>
          </div>
          <div class="header-right">
            <a href="#">更多新品 ></a>
          </div>
        </div>
        <div class="container" @click="toDetail">
          <div class="container-left">
            <div class="left-img">
              <img
                :src="currentHotList.left.listPicUrl"
                alt=""
                :data-id="currentHotList.left.id"
              />
            </div>
            <span class="left-text" :data-id="currentHotList.left.id">
              {{ currentHotList.left.name }}
            </span>
            <p class="left-price">
              <span class="price-height">¥3.5</span>
              <span class="price-low">¥4.9</span>
            </p>
          </div>
          <div class="container-right">
            <div
              class="hot-item"
              v-for="(item, index) in currentHotList.right"
              :key="index"
            >
              <div class="left-img">
                <img :src="item.listPicUrl" alt="" :data-id="item.id" />
              </div>
              <span class="left-text" :data-id="item.id">
                {{ item.name }}
              </span>
              <p class="left-price">
                <span class="price-height">¥3.5</span>
                <span class="price-low">¥4.9</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 居家生活组件 -->
    <Goods
      v-for="(itemList, index) in cateList"
      :key="index"
      :itemList="itemList"
      @toDetail="toDetail"
    />
    <!-- 甄选家 -->
    <Sample :sampleList="zxjEntranceList" />
    <!-- 大家都在说 -->
    <Comment :commentList="commentList" />
  </div>
</template>

<script>
import Carousel from './Carousel'
import Goods from './Goods'
import Sample from './Sample'
import Comment from './Comment'
import NewStore from './NewStore'
import { reqGetIndexData } from '@/api/home'
export default {
  name: 'Home',
  components: {
    Carousel,
    Goods,
    Sample,
    Comment,
    NewStore,
  },
  data() {
    return {
      // 新品首发模块的数据-->newItemList
      newItemList: [],
      // 人气推荐模块的数据(编辑推荐,推荐总榜)-->indexPopularItemVO.popularItemList&&popularTotalList
      hotList: {
        // 编辑推荐
        popularItemList: {
          // 左边大块
          left: [],
          // 右边小快,最多只有六个
          right: [],
        },
        // 推荐总榜
        popularTotalList: {
          // 左边大块
          left: [],
          // 右边小快,最多只有六个
          right: [],
        },
      },

      // 居家生活版块的数据-->cateList
      cateList: [],
      // 评论版块的数据(大家都在说)-->commentList
      commentList: [],
      // 样品试用,意见征集(甄选家)-->zxjEntranceList
      zxjEntranceList: [],
      // 控制人气推荐模块,显示的是编辑推荐还是推荐总榜,0-->编辑推荐,1-->推荐总榜
      hotIndex: 0,
      // 当前人气板块需要渲染的数据
      currentHotList: {},
    }
  },
  async mounted() {
    const {
      cateList,
      commentList,
      newItemList,
      zxjEntranceList,
      indexPopularItemVO,
    } = await reqGetIndexData()
    // 将数据放到data中,变成响应式
    this.newItemList = newItemList
    this.cateList = cateList
    this.commentList = commentList
    this.zxjEntranceList = zxjEntranceList
    // 人气推荐版块数据-->不改结构,就需要自己处理一下
    const { popularItemList, popularTotalList } = indexPopularItemVO
    this.hotList.popularItemList = this.handleHotListData(popularItemList)
    this.hotList.popularTotalList = this.handleHotListData(popularTotalList)
    // 当前板块
    this.currentHotList = this.handleHotListData(popularItemList)
  },
  methods: {
    // 点击商品跳转到商品详情页
    toDetail(event) {
      // console.log('传过来的事件对象', event.target.dataset.id)
      if (!event.target.dataset.id) return
      this.$router.history.push({
        path: '/detail',
        query: {
          id: event.target.dataset.id,
        },
      })
    },
    // 点击选择编辑推荐或热销总榜,并切换数据
    handleHot(currentIndex) {
      this.hotIndex = currentIndex
    },
    // 处理人气推荐模块左右数据的问题
    handleHotListData(arr) {
      const newObj = {}
      newObj.left = arr[0]
      newObj.right = arr.slice(1, 7)
      return newObj
    },
  },
  watch: {
    hotIndex: {
      handler(hotIndex) {
        // 编辑推荐
        if (hotIndex === 0) {
          this.currentHotList = this.hotList.popularItemList
        }
        // 推荐总榜
        if (hotIndex === 1) {
          this.currentHotList = this.hotList.popularTotalList
        }
      },
      immediate: true,
    },
  },
}
</script>

<style lang="less" scoped>
// 轮播图区域
.swiper-area {
  margin: 50px 0;
  width: 100%;
  height: 420px;
}
// 标题样式
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 30px;
  .header-left {
    display: flex;
    align-items: flex-end;
    h3 {
      font-size: 28px;
      margin-right: 20px;
      a {
        text-decoration: none;
        color: #333;
      }
      a:hover {
        color: #e2c199 !important;
      }
    }
    p {
      font-size: 14px;
      padding-bottom: 3px;
    }
  }
  .header-right {
    padding-bottom: 3px;
    a {
      text-decoration: none;
      font-size: 14px;
      color: #333;
    }
    a:hover {
      color: #e2c199 !important;
    }
  }
}

//人气推荐区域
.hot-wrap {
  padding: 50px 0 60px;
  width: 100%;
  background-color: #f4f0ea;
  .hot-container {
    width: 1090px;
    margin: 0 auto;
    // border: 1px solid pink;
    .hot-menu {
      font-size: 14px;
      margin-right: 55px;
      width: 70px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      &.active {
        color: #b4a078;
        border-bottom: 2px solid #b4a078;
      }
    }
    .container {
      display: flex;
      justify-content: space-between;
      .container-left {
        width: 390px;
        height: 570px;
        // border: 1px solid green;
      }
      .container-right {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        align-content: space-between;

        width: 690px;
        height: 570px;
        // border: 1px solid pink;
      }
    }
  }
  // 左侧大盒子
  .container-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
    .left-img {
      display: flex;
      width: 390px;
      height: 400px;
      margin-bottom: 50px;
      border-bottom: 1px solid #f4f0ea;
      justify-content: center;
      align-items: center;
      img {
        height: 320px;
        width: 320px;
        transition: all 0.5s linear 0.3s;
      }
    }
    .left-img:hover {
      img {
        transform: scale(1.1);
      }
    }
    .left-text {
      font-size: 18px;
      text-align: center;
      font-weight: bold;
      width: 240px;
      margin-bottom: 15px;
      &:hover {
        color: #e2c199;
      }
    }
    .left-price {
      .price-height {
        color: #d4282d;
        font-size: 18px;
        margin-right: 5px;
      }
      .price-low {
        text-decoration: line-through;
        color: #999;
        font-size: 14px;
      }
    }
  }
  // 右侧每一个小盒子
  .hot-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
    height: 280px;
    margin-right: 10px;
    &:nth-child(3),
    &:nth-child(6) {
      margin-right: 0px !important;
    }
    .left-img {
      display: flex;
      width: 223px;
      height: 180px;
      margin-bottom: 20px;
      border-bottom: 1px solid #f4f0ea;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      img {
        height: 180px;
        width: 180px;
        transition: all 0.5s linear 0.3s;
      }
    }
    .left-img:hover {
      img {
        transform: scale(1.1);
      }
    }
    .left-text {
      font-size: 13px;
      text-align: center;
      font-weight: bold;
      width: 130px;
      margin-bottom: 5px;
      &:hover {
        color: #e2c199;
      }
    }
    .left-price {
      .price-height {
        color: #d4282d;
        font-size: 13px;
        margin-right: 5px;
      }
      .price-low {
        text-decoration: line-through;
        color: #999;
        font-size: 10px;
      }
    }
  }
}
</style>
